<template>
	<view>
		<u-navbar title="我的优惠券" title-color='black' background-color='white' :title-bold="true">
		</u-navbar>
		<u-tabs active-color="#47A848" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="m20" v-if="coupontList.length">
			<CouponItem :classIndex="current" :item="item" v-for="item in coupontList"></CouponItem>
			<u-loadmore style="width: 100%;" v-if="coupontList.length!=0" margin-top="20" margin-bottom="30"
				:status="loadStatus" :load-text="loadText" />
		</view>
		<view v-else class="df aic jcc" style="flex-direction: column;width: 100%;height: 80vh;">
			<image src="@/static/empty/content-empty.png" style="width: 460rpx;" mode="widthFix">
			</image>
			<view class="c9 fs28 mt20">
				暂无优惠券
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {memberCouponList} from '@/api/coupon.js'
	import CouponItem from '@/pages/confirm/components/CouponItem.vue'
	export default {
		components: {CouponItem},
		data() {
			return {
				list: [{
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期',
				}],
				current: 0,
				loadStatus: 'loadmore',
				pageNum: 1,
				pageSize: 20,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				coupontList:[],
			};
		},
		onReachBottom() {
			this.getList()
		},
		onLoad() {
			this.init()
			this.getList()
		},
		methods: {
			init(){
				this.loadStatus = 'loadmore'
				this.pageNum = 1
				this.pageSize = 20
				this.coupontList = []
			},
			getList(){
				if (this.loadStatus == 'nomore' || this.loadStatus == 'loading') return
				this.loadStatus = 'loading'
				memberCouponList({pageNum: this.pageNum,
					pageSize: this.pageSize,
					bIndex:this.current+1}).then(res =>{
					if(res.code==200){
						this.coupontList.push(...res.rows)
						this.pageNum = ++this.pageNum;
						if (res.rows.length < this.pageSize) {
							this.loadStatus = 'nomore' //不用加载下一页
						} else {
							this.loadStatus = 'loadmore' //不用加载下一页
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							mask:true
						})
					}
				})
			},
			change(e){
				this.current = e
				this.init()
				this.getList()
			}
		},
	};
</script>

<style lang="scss" scoped></style>